<template>
  <div class="payment-wrapper">
    <div class="top">
      <div class="title-wrapper">
        <div class="title">支付配置</div>
      </div>
      <el-button type="primary" size="medium" @click="addPaymentSetting">添加</el-button>
    </div>
    <div class="content">
      <div class="tip">
        <el-row>
          <el-col style="width: 600px">
            <div class="grid-content bg-purple-dark">
              <span>
                请登录微信商户平台，将以下信息获取并配置完成。
                <el-link type="primary">点击前往微信商户平台</el-link>
              </span>
            </div>
          </el-col>
          <el-col style="width: 150px">
            <div class="grid-content bg-purple-dark">
              <el-link type="primary">查看操作视频</el-link>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="setting-box" style="margin-top: 20px; width: 500px">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="APP ID:" prop="appid">
            <el-input
              v-model="ruleForm.appid"
              size="medium"
              style="width: 300px"
              placeholder="微信公众号AppID"
            />
          </el-form-item>
          <el-form-item label="支付商户号：" prop="mchid">
            <el-input
              v-model="ruleForm.mchid"
              size="medium"
              style="width: 300px"
              placeholder="微信商户平台商户号"
            />
          </el-form-item>
          <el-form-item label="API密钥：" prop="key">
            <el-input
              v-model="ruleForm.key"
              type="password"
              size="medium"
              style="width: 300px"
              placeholder="微信商户平台的API密钥"
            />
          </el-form-item>
          <el-form-item label="公众账号：" prop="appsecret">
            <el-input
              v-model="ruleForm.appsecret"
              size="medium"
              style="width: 300px"
              placeholder="微信商户平台的API密钥"
            />
          </el-form-item>
          <el-form-item label="小程序AppID：" prop="appsecret">
            <el-input
              v-model="ruleForm.app_id"
              size="medium"
              style="width: 300px"
              placeholder="小程序AppID"
            />
          </el-form-item>
          <el-form-item label="小程序secret：" prop="appsecret">
            <el-input
              v-model="ruleForm.app_secret"
              size="medium"
              style="width: 300px"
              placeholder="小程序secret"
            />
          </el-form-item>
          <el-form-item label="证书路径：">
            <el-upload
              :limit="1"
              class="upload-demo"
              action="http://shop.zhixiu.vip/api/common/uploadCertificate"
              :on-success="handleCredentialSuccess"
              :file-list="credentialList"
            >
              <el-button type="primary" plain style="width: 150px">上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="密钥路径：">
            <el-upload
              :limit="1"
              class="upload-demo"
              action="http://shop.zhixiu.vip/api/common/uploadCertificate"
              :on-success="handleKeytSuccess"
              :file-list="keytList"
            >
              <el-button type="primary" plain style="width: 150px">上传</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { setPayment, getProtocal, setMiniProm } from '@/api/platform-setting'
const ERR_OK = 200
export default {
  data() {
    return {
      ruleForm: {
        appid: '',
        mchid: '',
        key: '',
        appsecret: '',
        sslcert_path: '',
        sslkey_path: '',
        app_id: '',
        app_secret: ''
      },
      rules: {
        appid: [{ required: true, message: '请输入AppID', trigger: 'blur' }],
        mchid: [
          { required: true, message: '请输入支付商户号', trigger: 'blur' }
        ],
        app_id: [
          { required: true, message: '请输入小程序AppID', trigger: 'blur' }
        ],
        app_secret: [
          { required: true, message: '请输入小程序secret', trigger: 'blur' }
        ],
        key: [{ required: true, message: '请输入AppID', trigger: 'blur' }]
      },
      credentialList: [],
      keytList: []
    }
  },
  created() {
    this._getProtocal()
  },
  methods: {
    handleCredentialSuccess(res) {
      if (res.code === ERR_OK) {
        this.ruleForm.sslcert_path = res.path
      }
      console.log(this.ruleForm.sslcert_path)
    },
    handleKeytSuccess(res) {
      if (res.code === ERR_OK) {
        this.ruleForm.sslkey_path = res.path
      }
    },
    addPaymentSetting() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this._setPayment(this.ruleForm)
          this.setMiniProm({ app_id: this.ruleForm.app_id, app_secret: this.ruleForm.app_secret })
        } else {
          return false
        }
      })
    },
    // 图片、视频格式化
    handleList(url) {
      const oIndex = url.lastIndexOf('/')
      const name = url.slice(oIndex + 1)
      return { name, url }
    },
    _setPayment({ appid, mchid, key, appsecret, sslcert_path, sslkey_path }) {
      setPayment({ appid, mchid, key, appsecret, sslcert_path, sslkey_path })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: '支付配置设置成功',
              type: 'success',
              showClose: true
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getProtocal() {
      getProtocal()
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.ruleForm.appid = res.data.payConfig.appid
            this.ruleForm.mchid = res.data.payConfig.mchid
            this.ruleForm.key = res.data.payConfig.key
            this.ruleForm.appsecret = res.data.payConfig.appsecret
            this.ruleForm.sslcert_path = res.data.payConfig.sslcert_path
            this.ruleForm.sslkey_path = res.data.payConfig.sslkey_path
            this.credentialList.push(this.handleList(res.data.payConfig.sslcert_path))
            this.keytList.push(this.handleList(res.data.payConfig.sslkey_path))
            this.ruleForm.app_id = res.data.appletConfig.app_id
            this.ruleForm.app_secret = res.data.appletConfig.app_secret
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
// @import "@/styles/el-button.scss";
.payment-wrapper {
  padding: 0 20px;
  box-sizing: border-box;
  .top {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    .title-wrapper {
      display: flex;
      align-content: center;
      .title {
        height: 44px;
        line-height: 44px;
        color: rgba(68, 68, 68, 1);
        font-size: 18px;
        font-family: Roboto;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background-color: #eff7ff;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-right: 10px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
